import React, { useEffect, useMemo, useState } from 'react';
import { Popconfirm, message, Button, Table, Space, Divider, Input, Pagination } from 'antd';
import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux'

import { ICustomer, } from '@/services/customer.d'
import { updateOpMessageAction, getListDataAction, getDetailByIdAction, removeDataByIdAction, updateDataAction, addDataAction } from '@/redux/actions/customer'

import { RootState } from '@/redux/store'

import Edit from './Edit'

import styles from './index.less'

const { Search } = Input;


const Index = () => {
  const [keyWord, setKeyWord] = useState<string>('');
  const [pageSize, setPageSize] = useState<number>(10);
  const [page, setPage] = useState<number>(1);
  const [visible, setVisible] = useState(false);


  const customerList: ICustomer[] = useSelector((state: RootState) => state.customer.customerList);
  const customerDetail = useSelector((state: RootState) => state.customer.customerDetail);
  const requestRes = useSelector((state: RootState) => state.customer.requestRes);
  const isFetching = useSelector((state: RootState) => state.customer.isFetching);

  const pageInfo = useSelector((state: RootState) => state.customer.pageInfo);

  const dispatch = useDispatch();



  useEffect(() => {
    const params = {
      name: keyWord,
      pageSize,
      page
    }

    dispatch(getListDataAction(params))

  }, [keyWord, pageSize, page, dispatch]);

  useEffect(() => {
    if (requestRes) {
      message.success(requestRes)
      dispatch(updateOpMessageAction(null))
    }

  }, [requestRes, dispatch]);


  const handleTableChnage = (pagination) => {
    const { current: page, pageSize } = pagination

    setPageSize(pageSize)
    setPage(page)
  }



  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Action',
      key: 'action',
      // eslint-disable-next-line react/display-name
      render: (text: any, record: ICustomer) => (
        <Space size="middle">
          <Popconfirm
            title="确定删除吗?"
            onConfirm={() => { record.key && dispatch(removeDataByIdAction(record.key)) }}
            okText="确定"
            cancelText="取消">
            <a>
              <span style={{ display: 'inline-block', marginRight: 8 }}>删除</span>
              <DeleteOutlined />
            </a>
          </Popconfirm>
          <Divider type="vertical" />
          <a onClick={() => {

            record.key && dispatch(getDetailByIdAction(record.key));
            setVisible(true)
          }} >
            <span style={{ display: 'inline-block', marginRight: 8 }}> 编辑</span>
            <EditOutlined />
          </a>
        </Space>
      ),
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.operation}>
        <Search placeholder="请输入姓名" style={{ width: 300 }} onSearch={(value) => { setKeyWord(value) }} enterButton />
        <Button onClick={() => { setVisible(true) }} type="primary">
          添加
          <PlusOutlined />
        </Button>
      </div>
      <Divider />
      <Table
        dataSource={customerList}
        columns={columns}
        pagination={{
          showSizeChanger: true,
          page: pageInfo.page,
          total: pageInfo.total
        }}
        onChange={handleTableChnage}
      />
      {visible && <Edit
        visible={visible}
        handleCancel={() => { setVisible(false) }}
        details={customerDetail}
        handleOk={(datas) => {
          if (datas.id) {

            dispatch(updateDataAction(datas))

          } else {
            dispatch(addDataAction(datas))
          }
          setVisible(false)
          return Promise.resolve({ isFetching, requestRes });
        }}
      />}

      <br />

    </div >
  );
};

export default Index;
